<template>
  <div class="comments">
    <!------------------------------------------------------返回导航------------------------------------------------------------------>
    <HeaderTitle :title="WebName"></HeaderTitle>
    <van-pull-refresh v-model="MianLoading" @refresh="onRefresh">
      <!------------------------------------------------------评价------------------------------------------------------------------>
      <div class="evaluation"  v-for="(item,index) in review" :key="index">
        <!-- 骨架 -->
        <van-skeleton title avatar :row="2" :loading="evaluationLoading" >
          <div class="container">
            <!-- 内容盒子 -->
            <div class="evaluationBox">
              <div class="evaluationHeader van-row">
                <!-- 头像 -->
                <van-image round :src="item.icon" class="van-col--4"/>
                <!-- 名称，时间 -->
                <div class="HeaderTitle van-col--14">
                  <p class="Name">{{item.userName}}</p>
                  <p class="Time">{{item.createTime}}</p>
                </div>
                <div class="likeCount van-col--6">
                  <van-icon name="like-o" />{{item.likeCount}}
                </div>
              </div>
              <div class="textContent ">
                {{item.content}}
              </div>
            </div>
          </div>
        </van-skeleton>

        <!--  -->
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
/* ... */
import HeaderTitle from '@/components/HeaderTitle.vue'
import { usercomments } from '@/api/api'
export default {
  name: 'goods',

  mixins: [],

  components: {
    HeaderTitle
  },

  props: {},

  data () {
    return {
      WebName: '评论',
      MianLoading: false,
      count: 0,
      evaluationLoading: true,
      Id: this.$route.query.id,
      review: []
    }
  },

  computed: {},

  watch: {},

  created () {
    var data = { 'commodityId': this.Id, 'pageSize': 50 }
    this.GetJson(data)
  },

  mounted () {},

  destroyed () {},

  methods: {
    // 列表数据请求
    GetJson (review) {
      usercomments(this.$qs.stringify(review))
        .then(res => {
          this.review = res.data.data
          this.evaluationLoading = false
          console.log(this.review)
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        // this.$toast('刷新成功')
        this.evaluationLoading = true
        var data = { 'commodityId': this.Id, 'pageSize': 50 }
        this.GetJson(data)
        this.MianLoading = false
        this.count++
      }, 500)
    }
  }
}
</script>

<style lang="less" >
/* ... */

.container {
   margin: 0 15px;
}
.comments {
  height: 100%;
  background-color: #f6f6f6;
  .van-pull-refresh {
    height: calc(100% - 50px);
    overflow-y: auto;
    .evaluation {
      margin-top: 10px;
      background-color: #ffffff;
      .evaluationBox {
        padding-top: 10px;
        padding-bottom: 10px;
        .evaluationHeader {
          .van-image {
            width: 30px;
            height: 30px;
          }
          .HeaderTitle {
            display: inline-block;
            margin-left: 10px;
            p {
              margin: 0;
            }
            .Name {
              font-size: 14px;
              color: #333333;
            }
            .Time {
              font-size: 11px;
              color: #999999;
            }
          }
          .likeCount{
            display: inline-block;
            text-align: right;
            font-size: 12px;
            color: #666666;
          }
        }

        .textContent {
          font-size: 12px;
          color: #999999;
          text-indent: 24px;
        }
      }
      .van-skeleton {
        padding-top: 10px;
        padding-bottom: 15px;
      }
    }
  }
}
</style>
